<template>
    <div class="box-view flex center">

        <!-- 计算属性测试 -->
        <div>{{ cmp.testStr }}</div>

        <!-- 插槽 -->
        <div class="flex">
            <slot name="header" :data="tcText"></slot>
        </div>

        <!-- 内容 -->
        <div class="flex row center">
            <div class="vv-btn vv-reduce flex center" :class="`btn-size-${option.size}`" 
                @click="onClick('reduce')">-</div>

            <slot :data="tcText" :unit="unit">
                <div class="vv-content flex center">
                    <!-- {{ cmp.texts }} -->
                    {{ cmp.textsGS }}
                </div>
            </slot>

            <div class="vv-btn vv-plus flex center" :class="`btn-size-${option.size}`" 
                @click="onClick('plus')">+</div>
        </div>

        <div class="vv-set-com" @click="onSetTextUnit">设置为(20瓶)</div>
        <div class="vv-test" @click="onTest">测试按钮</div>

        <!-- 插槽 -->
        <div class="flex">
            <slot name="footer"></slot>
        </div>

    </div>
</template>
<script setup>
    import { ref, reactive, watch, computed, defineProps, defineEmits } from "vue";
    import _props from "./props/props";

    const props = defineProps(_props);
    const emits = defineEmits(['update:text', 'update:formatText', 'formatText', 'plus', 'reduce']);
    
    const tcText = ref(0);
    const tcUnit = ref('');

    const cmp = reactive({

        texts: computed(() => {
            return `${tcText.value} ${props.unit}`;
        }),

        textsGS: computed({
            get () {
                return `${tcText.value} ${tcUnit.value || props.unit}`;
            },
            set (val) {
                let {
                    num = 0,
                    unit = '',
                } = { ...val }

                tcText.value = num;
                tcUnit.value = unit;
            },
        }),

        testStr: computed(() => props.testList.map(m => m.name).join('--')),

    });

    watch(() => props.text, (val) => {
        tcText.value = val;
    })

    watch(tcText, (val) => {
        console.log('tcText watch = ', val, props);
        emits('update:text', val);
        // 方式一：双向绑定
        emits('update:formatText', val + props.unit);
        // 方式二：回调
        emits('formatText', val + props.unit)
    })

    watch(() => props.option, ()=>{}, { deep:true, immediate: true })

    
    const onClick = (tagger = 'plus') => {
        // 事件预处理
        if(tagger === 'plus'){
            tcText.value += 1;
        }else if(tagger === 'reduce'){
            tcText.value -= 1;
        }

        emits(tagger);
    }

    /**
     * 设置计算属性的值
     */
    const onSetTextUnit = () => {
        cmp.textsGS = { num: 20, unit: '瓶' };
    }

    /**
     * 测试按钮
     */
    const onTest = () => {
        // console.log(this.textsGS);
        // console.log(this.textsGS);
        // console.log(this.textsGS);
        // console.log(this.textsGS);
        console.log(this.textsGS);
    }

</script>
<style scoped>
    .box-view {
        width: 600px;
        height: 300px;
        border: 1px solid #EFEFEF;
        border-radius: 10px;
    }
    .vv-btn {
        width: 80px;
        height: 80px;
        background-color: #409EFF;
        font-size: 36px;
        color: #FFF;
        font-weight: bold;
        border-radius: 6px;
        cursor: pointer;
    }
    .vv-btn:hover {
        background-color: #3D95F1;
    }
    .vv-btn:active {
        background-color: #3787DA;
    }

    .vv-plus {
        font-size: 30px;
    }
    .vv-content {
        width: 150px;
        height: 80px;
        font-size: 36px;
        color: #121212;
        font-weight: bold;
    }
    .vv-reduce {
        font-size: 36px;
    }
    .btn-size-small {
        width: 50px;
        height: 50px;

    }
    .btn-size-big {
        width: 80px;
        height: 80px;
    }
    .vv-set-com {
        margin-top: 30px;
        font-size: 16px;
        color: #409EFF;
        cursor: pointer;
        box-sizing: border-box;
    }
    .vv-set-com:hover {
        text-decoration: underline;
    }
    .vv-test {
        font-size: 16px;
        color: #409EFF;
        cursor: pointer;
        box-sizing: border-box;
    }
    .vv-test:hover {
        text-decoration: underline;
    }
</style>